<template>
    <div class="large-map-container">
        <a-spin tip="Loading..." :spinning="loading">
            <div class="map-title">中医药成果转化数据中心</div>
            <div class="large-box">
                <div class="large-left">
                    <div id="mapChart"></div>
                </div>
                <div class="large-right">
                    <div class="child-panel">
                        <div class="panel-title">
                            <span class="panel-title-word">科技成果占比</span>
                        </div>
                        <AchProVue :pageData="otherPageData.categoryProportion" v-if="otherPageData.categoryProportion" />
                    </div>
                    <div class="child-panel">
                        <div class="panel-title">
                            <span class="panel-title-word">技术需求占比</span>
                        </div>
                        <DemandRate :pageData="otherPageData.subCategories" v-if="otherPageData.subCategories" />
                    </div>
                </div>

            </div>
            <!-- <div class="large-map" @click="jumpLarge">
                <img class="large-bg" :src="require('@/assets/img/large-bg.png')" />
                
            </div> -->

        </a-spin>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { echartLoad, toDecimalNoZero } from "@/utils";
import { Component, Vue,Prop } from "vue-property-decorator";
import config from "@/utils/config";
import DemandRate from "@/components/demandRate.vue";
import AchProVue from "@/components/achPro.vue";
@Component({
    name: "home",
    components: { DemandRate, AchProVue },
})
export default class extends Vue {
    @Prop({ default: () => {} }) otherPageData!: any;
    pageData: any[] = [];
    chart: any = null;
    loading = false;
    async mounted() {
        this.loading = true;
        Promise.all([this.getPageData()]).then(() => {
            echartLoad(() => {
                const data = require(`@/utils/map.json`);
                window.echarts.registerMap("china", data);
                this.setChart();
                this.loading = false;
            });
        });
    }
    destoroy() {
        this.mapTimer && clearInterval(this.mapTimer);
    }
    // otherPageData = {};
    // async getData() {
    //     this.loading = true;
    //     try {
    //         const res = await api.findBigScreenData({});
    //         this.otherPageData = res.data;
    //     } finally {
    //         this.loading = false;
    //     }
    // }

    async getPageData() {
        const res = await api.findAchievement();
        this.pageData = res.data;
    }
    mapTimer: number | null = null;
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }
        this.startAutoPlay();

        this.chart.on("mouseover", () => {
            this.mapTimer && clearInterval(this.mapTimer); // 清除定时器
            this.mapTimer = null;
            //this.chart.dispatchAction({ type: "hideTip", seriesIndex: 0, dataIndex: this.lastIndex });
            //this.chart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: this.lastIndex });
        });

        // 监听鼠标离开图表事件：恢复轮播
        this.chart.on("globalout", () => {
            if (this.mapTimer === null) this.startAutoPlay(); // 重新启动定时器
        });
    }
    currentIndex = 0;
    lastIndex = -1;
    startAutoPlay() {
        // 获取所有区域
        const dataList = this.pageData;
        // 默认高亮四川区域
        const findIdx = dataList.findIndex((item) => {
            return item.name === "四川";
        });
        this.currentIndex = findIdx;
        this.lastIndex = Number(this.currentIndex);
        // 触发 Tooltip 显示
        this.chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0, // 对应 series 的索引
            dataIndex: this.currentIndex, // 当前数据项索引
        });
        this.chart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: this.currentIndex });
        return;

        //if (this.mapTimer) clearInterval(this.mapTimer);
        // 设置定时器
        this.mapTimer = setInterval(() => {
            // 隐藏上一个 Tooltip 并取消高亮
            if (this.lastIndex !== -1) {
                this.chart.dispatchAction({ type: "hideTip", seriesIndex: 0, dataIndex: this.lastIndex });
                this.chart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: this.lastIndex });
            }

            // 触发 Tooltip 显示
            this.chart.dispatchAction({
                type: "showTip",
                seriesIndex: 0, // 对应 series 的索引
                dataIndex: this.currentIndex, // 当前数据项索引
            });
            this.chart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: this.currentIndex });

            // 更新索引，循环播放
            this.lastIndex = Number(this.currentIndex);
            this.currentIndex = (this.currentIndex + 1) % dataList.length;
        }, 2000); // 2秒切换一次
    }
    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("mapChart");
        let max = Math.max(...this.pageData.map((item) => item.value)) || 0;
        max = Math.floor(max * 1.1);
        console.info(max);
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            tooltip: {
                trigger: "item",
                showDelay: 0,
                transitionDuration: 0.2,
            },
            visualMap: {
                right: "50",
                top: "center",

                min: 0,
                max: max,
                inRange: {
                    color: ["#C3FEFF", "#1DAAFF"],
                },
                text: ["高", "低"],
                calculable: false,
                textStyle: {
                    color: "#0862db",
                },
            },
            series: this.getSeries()[1],
            geo: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);

            this.chart.on("click", (params) => {
                console.info(params);
                if (params.componentType === "series" && params.seriesType === "map") {
                    this.chart.setOption({
                        // 更新配置项并设置聚焦的省会城市为中心点，并放大显示级别提高（zoom值增加）
                        geo: {
                            // geo组件配置项（如果你的地图使用了geo组件）
                            center: [params.data._geoCoord[0], params.data._geoCoord[1]], // 设置中心点为点击的省份的地理坐标（需要事先定义）
                            zoom: 3, // 设置放大级别，根据需要调整值以实现合适的放大效果
                        },
                    });
                }
            });
        }
    }

    getSeries() {
        const one = {
            name: "科技成果",
            type: "map",
            roam: false,
            map: "china",
            top: "10%",
            zoom: 1.2,
            geoIndex: 9,
            emphasis: {
                label: {
                    show: true,
                },
            },
            data: this.pageData.map((item) => {
                const nameArr1 = ["北京", "天津", "上海", "重庆"];
                const nameArr2 = ["西藏", "内蒙古"];
                let name = item.name + "省";
                if (nameArr1.indexOf(item.name) >= 0) {
                    name = item.name + "市";
                }
                if (nameArr2.indexOf(item.name) >= 0) {
                    name = item.name + "自治区";
                }
                if (item.name === "新疆") {
                    name = "新疆维吾尔自治区";
                }
                if (item.name === "宁夏") {
                    name = "宁夏回族自治区";
                }
                if (item.name === "广西") {
                    name = "广西壮族自治区";
                }
                if (item.name === "香港") {
                    name = "香港特别行政区";
                }
                if (item.name === "澳门") {
                    name = "澳门特别行政区";
                }
                return {
                    name,
                    value: item.value,
                    center: item.center,
                };
            }),
        };
        const two = {
            name: "科技成果",
            type: "map",
            roam: false,
            map: "china",
            top: "6%",
            zoom: 1.2,
            emphasis: {
                label: {
                    show: true,
                },
            },
            data: [],
            itemStyle: {
                borderColor: "#d8feff",
                borderWidth: 3,
                shadowBlur: 10,
                shadowColor: "#22a1ff",
                areaColor: "#0862db",
                shadowOffsetX: 0,
                shadowOffsetY: 8,
            },
        };
        const thr = {
            name: "科技成果",
            type: "map",
            top: "11%",
            roam: false,
            map: "china",
            geoIndex: 7,
            zoom: 1.2,
            emphasis: {
                label: {
                    show: true,
                },
            },
            data: [],
            itemStyle: {
                borderColor: "#0862db",
                borderWidth: 1,
                shadowBlur: 10,
                shadowColor: "#0862db",
                areaColor: "#0862db",
                shadowOffsetX: 0,
                shadowOffsetY: 2,
            },
            regions: [
                {
                    // 隐藏南海诸岛,因为顶层已经添加过了
                    name: "南海诸岛",
                    itemStyle: {
                        opacity: 0, // 为 0 时不绘制该图形
                    },
                    label: {
                        show: false,
                    },
                },
            ],
        };
        return [thr, one];
    }

    jumpLarge() {
        //window.open(config.adminUrl+'/#/largeScreen')
    }
}
</script>
<style lang="scss">
.large-map-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    margin-top: 50px;
    .map-title {
        font-weight: bold;
        font-size: 22px;
        color: #2f65f3;
        padding: 10px;
    }
}
.large-box {
    height: 600px;
    .large-left {
        display: inline-block;
        height: 100%;
        width: 66%;
    }
    #mapChart {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 10;
    }
    .large-right {
        display: inline-block;
        width: 34%;
        vertical-align: top;
    }
    .panel-title {
        font-weight: bold;
        font-size: 22px;
        color: #102040;
    }
}
</style>
